<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title>小卖铺</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- bootstrap-->
	<link rel="stylesheet" href="/static/plugins/bootstrap-4/css/bootstrap.min.css" media="all">
	<script src="/static/plugins/bootstrap-4/js/bootstrap.min.js" charset="utf-8"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<style type="text/css">
	body {background-color: #ECFBFE;}
	
	.width-full{width: 100%;}
	
	.container {background-color: #ffffff; margin-top: 12px; padding: 10px; border: 1px solid #B9E0ED;}
	
	.xiao_mai_pu{
		border-width:1px;
		border-style:solid;
		border-color:rgba(242, 242, 242, 1);
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	
	.title-cn{font-family:'黑体 Bold', '黑体 Regular', '黑体'; font-weight:700; font-style:normal; font-size:28px; color:#008080;}
	.title-en{font-family:'Lobster'; font-weight:400; font-style:normal; font-size:20px; color:#008080;}
	
	.zui_jin_shang_xin{
		padding: 10px;
	}
	.zui_jin_shang_xin-content{
		margin-top: 5px;
		padding: 10px 5px;
		display: flex;
		background-color:rgba(185, 224, 237, 1);
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	
	.zui_jin_shang_xin-list{
		margin: 30px 0;
		display: flex;
	}
	.zui_jin_shang_xin-item{
		width: 20%;
	}
	.zui_jin_shang_xin-item-top{
		margin: 5px 20px;
		padding: 10px;
		background-color: #ffffff;
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	.zui_jin_shang_xin-item-price{
		font-family:'Merriweather Bold', 'Merriweather Regular', 'Merriweather';
		font-weight:700;
		font-style:normal;
		font-size:18px;
		color:#D9001B;
	}
	.zui_jin_shang_xin-item-btn{
		margin: 10px 0;
	}
	.zui_jin_shang_xin-item-btn-text{
		font-family:'黑体 Bold', '黑体 Regular', '黑体';
		font-weight:700;
		font-style:normal;
		font-size:16px;
		
		background-color: #4886FF;
		color: #ffffff;
		padding: 10px 20px;
		border-radius:5px;
		height: 36px;
		line-height: 36px;
	}
	
	
	.li_pin{margin-top: 5px; padding: 10px;}
	.li_pin-content{
		padding: 5px;
		border-width:1px;
		border-style:solid;
		border-color:rgba(242, 242, 242, 1);
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	.li_pin-search{margin: 10px 0; padding: 5px;}
	.li_pin-search-input{
		height:56px;
		background:inherit;
		background-color:rgba(255, 255, 255, 1);
		box-sizing:border-box;
		border-width:1px;
		border-style:solid;
		border-color:rgba(125, 213, 249, 1);
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	.li_pin-cate{
		margin: 30px 0;
		display: flex;
	}
	.li_pin-cate-item{
		width: 25%;
	}
	.li_pin-list{
		margin: 30px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.li_pin-item{
		margin-top: 20px;
		width: 20%;
		border-radius:5px;
		-moz-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		-webkit-box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
		box-shadow:5px 5px 5px rgba(127, 127, 127, 0.349019607843137);
	}
	.li_pin-item-btn{
		margin: 20px 0;
	}
	.li_pin-item-btn-text{
		font-family:'黑体 Bold', '黑体 Regular', '黑体';
		font-weight:700;
		font-style:normal;
		font-size:16px;
		
		background-color: #4886FF;
		color: #ffffff;
		padding: 10px 20px;
		border-radius:5px;
		height: 36px;
		line-height: 36px;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12">
				<div class="xiao_mai_pu width-full">
					<img class="width-full" src="/static/img/xiaomaipu/xiao_mai_pu.png" >
				</div>
				
				<div class="zui_jin_shang_xin">
					<div>
						<span class="title-cn">最近上新 </span>
						<span class="title-en">Order of Learning</span>
					</div>
					<div class="zui_jin_shang_xin-content width-full text-center">
						<div class="zui_jin_shang_xin-list width-full">
							<div class="zui_jin_shang_xin-item" th:each="item : ${dto.latestArr}">
								<div class="zui_jin_shang_xin-item-top">
									<div><img th:src="${item.img}" width="126" height="123"></div>
									<div><span>[[${item.code}]]</span></div>
									<div><span>[[${item.name}]]</span></div>
									<div><span class="zui_jin_shang_xin-item-price">[[${item.amount}]]</span></div>
								</div>
								<div class="zui_jin_shang_xin-item-btn width-full text-center">
									<span class="zui_jin_shang_xin-item-btn-text" th:onclick="toBuy([[${item.id}]])">点击兑换</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="li_pin">
					<div>
						<span class="title-cn">礼品 </span>
						<span class="title-en">Gift</span>
					</div>
					<div class="li_pin-cate text-center">
						<div class="li_pin-cate-item" th:each="item : ${dto.cateArr}" th:onclick="listData(1, [[${item.id}]])">
							<div><img th:src="${item.img}" width="192" height="83"></div>
						</div>
					</div>
					<div class="li_pin-content text-center">
						<div class="li_pin-search width-full">
							<input type="text" class="li_pin-search-input width-full" />
						</div>
						<div class="li_pin-list" id="id_list_goods_by_cate">
							<!-- <div class="li_pin-item">
								<div><img src="/static/img/xuejika/xue_qing_jiang_li.png" width="126" height="123"></div>
								<div><span>aaaa</span></div>
								<div><span>bbbb</span></div>
								<div class="li_pin-item-btn width-full text-center">
									<span class="li_pin-item-btn-text">点击兑换</span>
								</div>
							</div> -->
						</div>
						
						<!-- 分页插件 -->
						<div id="pagerGoods"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
	var urlList = '/api/inter/tmGoods/list';
	var totalNum = null;
	var cateIdSelected = null;

	var $,layer,laydate,form,table,wherestr={};
	layui.use(['table','laydate','form','layer','jquery','element','laypage'], function () {
		$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
		
		// 加载页面
		loadPage();
	});

	function loadPage() {
		// 加载第一页数据
		listData(1);
		
		// 加载分页导航
		loadLayPage();
	}

	/*
	 * 加载列表数据
	 */
	function listData(page, cateId){
		if(cateId) {
			cateIdSelected = cateId;
		}
		var data = {page: page, cateId: cateIdSelected};
		
		$.ajaxSettings.async = false;
		$.get(urlList,data,function(res){
			var rows = res.data.rows;
			var str= ``;
			for(var i=0;i < rows.length;i++){
				var row = rows[i];
				str +=
				`<div class="li_pin-item">
					<div><img src="${row.img}" width="126" height="123"></div>
					<div><span>${row.code}</span></div>
					<div><span>${row.name}</span></div>
					<div><span class="zui_jin_shang_xin-item-price">${row.amount}</span></div>
					<div class="li_pin-item-btn width-full text-center" onclick="toBuy(${row.id})">
						<span class="li_pin-item-btn-text">点击兑换</span>
					</div>
				</div>`;
			}
			$('#id_list_goods_by_cate').html(str)
			totalNum = res.data.totalNum;
		});
		
		if(cateId) {
			loadLayPage();
		}
	}

	/*
	 * 加载分页导航
	 */
	function loadLayPage() {
		
		// 分页组件
		laypage.render({
			elem: 'pagerGoods'
			,count: totalNum
			,theme: '#1E9FFF'
			,layout: ['prev', 'page', 'next']
			,limit: 10
			,jump: function(obj, first){
				
				console.log('obj---', obj);
				console.log('first---', first);
				// 首次不执行
				if(!first){
					listData(obj.curr);
				}
			}
		});
	}
	function toBuy(id) {
		layer.open({
			type: 2,
			area: ['500px', '450px'],
			fix: true,
			maxmin: false,
			shadeClose: true,
			shade:0.4,
			title: "兑换礼品",
			content: '/web/mall/toBuy?id=' + id
		});
	}
	</script>
</body>
</html>